<template>
  <el-dialog
    title="追踪标签信息"
    :visible.sync="showDialog"
    @close="closeDialog"
  >
    <el-table
      class="table-box"
      :border="true"
      :data="tableData"
      style="width: 100%"
      size="mini"
    >
      <!-- 遍历col -->
      <ex-table-column
        v-for="column in tableColumns"
        :key="column.prop"
        :auto-fit="true"
        :fit-header="true"
        :prop="column.prop"
        :label="column.label"
      >
        <template slot-scope="scope">
          <template v-if="column.prop === 'labelUrl'">
            <template
              v-if="
                scope.row.labelUrl && scope.row.labelUrl.indexOf('pdf') > -1
              "
            >
              <el-link :href="fileUrl + scope.row.labelUrl">
                pdf
              </el-link>
            </template>
            <template v-else>
              <el-image
                style="width: 25px; height: 25px"
                :src="scope.row.labelUrl"
                :preview-src-list="[scope.row.labelUrl]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </template>
          <template v-else>
            {{ scope.row[column.prop] }}
          </template>
        </template>
      </ex-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { viewWaybillHdWaybillSubs } from '@/api/endpoint'
import golablData from '@/utils/config'
export default {
  props: {
    showSubs: {
      type: Boolean,
      default: false
    },
    id: [String, Number]
  },

  data() {
    return {
      fileUrl: golablData.fileUrl,
      tableData: [],
      tableColumns: [
        { prop: 'subWaybillNo', label: '子单号' },
        { prop: 'weight', label: '重量' },
        { prop: 'length', label: '长' },
        { prop: 'width', label: '宽' },
        { prop: 'height', label: '高' },
        { prop: 'trackNumber', label: '追踪号' },
        { prop: 'trackType', label: '追踪号类型' },
        { prop: 'labelUrl', label: '标签' }
      ]
    }
  },
  computed: {
    showDialog: {
      get: function() {
        if (this.showSubs) {
          this.getInfo()
        }
        return this.showSubs
      },
      set: function(val) {
        this.$emit(`update:showSubs`, val)
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit(`update:showSubs`, false)
    },
    async getInfo() {
      this.$store.dispatch('app/toggleDialog', true)

      const { code, data, message } = await viewWaybillHdWaybillSubs({
        id: this.id
      })
      this.$store.dispatch('app/toggleDialog', false)

      if (code !== 200) {
        this.$message.error(message)
        return
      }
      this.tableData = data
    }
  }
}
</script>

<style></style>
